<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>
    <title>登录</title>
</head>
<style>
    header{
        width: 100%;
        height: 70px;
        color: white;
        background-color: #5FC0CD;
    }
    .register{
        float: left;
        text-align: left;
        padding-left: 2%;
        width: 20%;
        height: 70px;
        line-height: 70px;
        font-size: 1em;
    }
    .login{
        float: left;
        text-align: center;
        width: 56%;
        height: 70px;
        line-height: 70px;
        font-size: 1em;
    }
    .close{
        float: left;
        text-align: right;
        padding-right: 2%;
        width: 20%;
        height: 70px;
        line-height: 70px;
        font-size: 1em;
    }
    .bg-div{
         float: left;
         margin: 12px 0 12px 0;
         width: 100%;
         height: 70px;
         display: flex;
         background-color: white;
    }
    img{
        width: 20px;
        height: 30px;
        margin: 1em 0 1em 1em;
    }
    .phone-text{
        margin: 0 0 1rem;
        height: 30px;
    }
    .lock-text{
        margin: 0 0 1rem;
        height: 30px;
        border-left: 2px solid #D4D4D4;
    }
    .button-login{
        float: left;
        margin-top: 10px;
        text-align: center;
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 1em;
        color: white;
        background-color: #386559;
    }
    .no-password{
        float: right;
        margin: 2% 2% 0 0;
        width: 65px;
        height: 20px;
    }
    a{
        color: #66cccc;
    }

</style>
<script type="text/javascript">
    function login(form){
        let name = form.name.value;
        let pass = form.pass.value;
        if (name == ""){
            alert("请输入账号");
            return false;
        }
        if (pass == ""){
            alert("请输入密码");
            return false;
        }
    }
</script>
<body>
<header>
    <div class="register"></div>
    <div class="login">登录</div>
</header>
<form th:action="@{/Login}" method="post" id="form1" onsubmit="return login(this)">
    <span th:text="${msg}" style="color: indianred"></span>
    <div class="phone-div">
        <div class="phone-text">
            <input type="text" class="form-control" id="name" name="name" placeholder="请输入账号">
        </div>
    </div>
    <div class="lock-div">
        <div class="lock-text">
            <input type="password" class="form-control" id="pass" name="pass" placeholder="请输入密码">
        </div>
    </div>
    <button class="button-login" type="submit">登录</button>
    <div class="no-password"><a th:href="@{/toR}">注册</a></div>
</form>
</body>

</html>